<template>
  <div class="m-fullbox m-backstage-login allCenter">
    <div class="m-login-center">
      <div class="m-login-left">
        <h1>{{ title }}</h1>
        <div class="left-input">
          <el-input
            v-model="account"
            prefix-icon="el-icon-user"
            placeholder="用户名"
          ></el-input>
          <el-input
            style="margin-top: 10px"
            v-model="password"
            type="password"
            prefix-icon="el-icon-lock"
            placeholder="密码"
            @keyup.enter.native="login"
          ></el-input>
          <div class="forgetPassword" @click="forgetPassword">忘记密码</div>
          <div class="login" @click="login">登录</div>
          <div style="text-align: center; margin-top: 10px">
            为保障使用流畅，推荐使用谷歌(Google)
          </div>
        </div>
      </div>
      <div class="m-login-right">
        <div class="version">版本：v0.0.1</div>
      </div>
    </div>
  </div>
</template>
<script>
import { SET_TOKEN } from "@/utils/token";
import { getTime } from "@/utils/time";
export default {
  data() {
    return {
      title: "XXX后台管理系统",
      account: "",
      password: "",
    };
  },
  methods: {
    async login() {
      this.$loading();
      try {
        let params = {
          username: this.account,
          password: this.password,
        };
        let result = await this.$http.login(params);
        if (result.code == 200) {
          this.$loading().close();
          SET_TOKEN(result.data.token);
          this.$router.push(
            {
              path: "/home",
            },
            () => {}
          );
          this.$notify({
            title: `HI,${getTime()}好`,
            message: "登录成功",
            type: "success",
          });
        } else {
          this.$loading().close();
          this.$message.error(result.data.message);
        }
      } catch (error) {
        this.$loading().close();
      }
    },

    forgetPassword() {
      this.$message.error("忘记密码咯");
    },
  },
};
</script>
<style lang="scss">
.m-backstage-login {
  background-image: url("@/assets/login_bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;

  .m-login-center {
    width: 60%;
    height: 70%;
    background-color: #fff;
    border-radius: 18px;
    display: flex;

    .m-login-left {
      width: 40%;
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
      margin-top: 8%;

      h1 {
        margin: 0 auto;
        width: 90%;
        text-align: center;
        height: 20%;
        font-size: 30px;
        font-weight: bold;
        border-bottom: 1px solid #c5c5c5;
      }

      .left-input {
        margin: 0 auto;
        margin-top: 50px;
        width: 90%;

        .forgetPassword {
          display: flex;
          justify-content: flex-end;
          margin-top: 10px;
          color: rgb(81, 107, 177);
          cursor: pointer;
        }

        .login {
          background-color: #8abdd0;
          color: white;
          font-size: 16px;
          width: 70%;
          height: 40px;
          margin: 0 auto;
          margin-top: 60px;
          border-radius: 30px;
          text-align: center;
          line-height: 40px;
          cursor: pointer;
        }
      }
    }

    .m-login-right {
      flex: 1;
      background-image: url("@/assets/login_img.png");
      background-repeat: no-repeat;
      background-position: center;
      border-left: 1px solid #c5c5c5;
      position: relative;

      .version {
        display: flex;
        justify-content: flex-end;
        margin-right: 15px;
        position: absolute;
        right: 10px;
        bottom: 10px;
      }
    }
  }
}
</style>